require(['./config'],()=>{
    require(['template','header','footer'],(template)=>{
        class Details{
            constructor(){
                this.getData().then(()=>{
                    this.render()
                    this.addToCare()
                    this.switch()
                })
            }
             getData(){
                return new Promise(resolve=>{
                    const num = window.location.search.slice(1).split('&').reduce((obj, item) => {
                        var arr = item.split('=')
                        obj[arr[0]] = arr[1]
                        return obj
                    }, {}).num
                    this.num = Number(num)
                    $.get('http://rap2.taobao.org:38080/app/mock/258745/api/details',{ num: this.num },resp=>{
                        const  details  = resp.body;                   
                         this.details = { ...details, num: this.num }                      
                         resolve()
                    })
                })              
             }
             render () {
                // 模板里面需要this.details的所有字段，那就展开传
                $('#design').html(template('detailTmplate', {                   
                   ...this.details
                }))
            }
            addToCare(){
                $('#add-shop').on('click', e => {           
                    let cart = localStorage.getItem('cart')             
                    if (cart) {
                        cart = JSON.parse(cart)
                        const isExist = cart.some(shop => {
                            return shop.num === this.details.num
                        })
                        if (isExist) {
                            cart = cart.map(shop => {
                                if (shop.num === this.details.num) {
                                    shop.count++
                                    alert('他已经在你的购物袋里边儿了,我们会为你增加他的数量。')
                                }
                                return shop
                            })
                        } else {
                            cart.push({
                                ...this.details,
                                count: 1,
                                checked: true
                            }
                            )
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        localStorage.setItem('cart', JSON.stringify([ {
                            ...this.details,
                            count: 1,
                            checked: true,                        
                        } ]))
                    }
                })
            }
            switch(){
                $('#design .banner ul li:first').addClass('discolor')
                $('#design').on('click','.banner',e=>{
                    const target =$(e.target)
                    target.parent().addClass('discolor')
                    target.parent().siblings().removeClass('discolor');
                    const src = target.attr('src')
                    $('.show img').attr('src',src)              
                })
                $('#design').on('click','.cc',e=>{
                   $('.bb span:first').html($(e.target).html())
                    
                    
                })
                       
            }
        }
        new Details()
    })
})